<template>
  <div relative f-c-c wh-full :style="{ backgroundColor: bgColor }">
    <dark-mode-switch pos="absolute left-48 top-24 z-3 " text-20 />
    <n-card :bordered="false" size="large" z-4 w-auto rd-20 shadow-sm>
      <div w-300 sm:w-360>
        <header f-b-c>
          <system-logo text="64 primary" />
          <n-gradient-text type="primary" :size="28">
            {{ appName }}
          </n-gradient-text>
        </header>
        <main class="pt-24">
          <n-gradient-text type="primary" text-18>
            {{ activeModule.label }}
          </n-gradient-text>
          <div class="pt-24">
            <transition
              enter-from-class="translate-x--30 op-0"
              leave-to-class="translate-x-30 op-0"
              mode="out-in"
              appear
            >
              <component :is="activeModule.component" class="duration-300" />
            </transition>
          </div>
        </main>
      </div>
    </n-card>
    <login-bg />
  </div>
</template>

<script lang="tsx" setup>
import { CodeLogin, LoginBg, PwdLogin, ResetPwd } from "./components";
import { mixColor } from "@/utils";
import { useThemeStore } from "@/store";

const route = useRoute();
const appName = import.meta.env.VITE_APP_NAME;
const themeStore = useThemeStore();

const modules: Record<string, any> = {
  "pwd-login": { label: "密码登录", component: PwdLogin },
  "code-login": { label: "验证码登录", component: CodeLogin },
  "reset-pwd": { label: "重置密码", component: ResetPwd },
};

const activeModule = computed(() => {
  const moduleKey = route.query.module as string;
  return modules[moduleKey] || modules["pwd-login"];
});

const bgColor = computed(() => {
  const COLOR_WHITE = "#ffffff";
  const ratio = themeStore.darkMode ? 0.5 : 0.2;

  return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
});
</script>
